<template>
  <div class="item-list-container">
    <el-card class="item-list-card">
      <div class="list-input-search">
        <div>
          <strong>关键字</strong
          ><el-input placeholder="请输入内容" v-model="searchInput" />
        </div>
        <div>
          <el-button @click="searchInput = ''">清除</el-button>
          <el-button type="primary">搜索</el-button>
        </div>
      </div>

      <el-table border :data="itemlists" style="width: 100%">
        <el-table-column type="index" label="序号" width="50px">
        </el-table-column>
        <el-table-column prop="addTime" label="组题时间" width="200px">
          <template v-slot="scope">{{
            scope.row.addTime | formatTime
          }}</template>
        </el-table-column>
        <el-table-column prop="userName" label="用户名" width="140px">
        </el-table-column>
        <el-table-column label="试题编号" min-width="130px">
          <template v-slot="scope">
            <span class="color-table-itemlist">{{
              scope.row.questionIDs
            }}</span></template
          >
        </el-table-column>
        <el-table-column prop="progressOfAnswer" label="答题进度" width="130 px">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率" width="130px">
        </el-table-column>
        <el-table-column
          prop="totalSeconds"
          label="答题总耗时（秒）"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="组题类型/详情"
          min-width="150px"
        >
        </el-table-column>
        <el-table-column label="操作" width="80px">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delitem"
          ></el-button>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        @size-change="itemListSizeChange"
        @current-change="itemListCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getItemLists, delItemLists } from '@/assets/api/base/itemlist.js';
export default {
  name: 'itemlist',
  props: {},
  data: function() {
    return {
      pagesize: 20, // 页尺寸
      keyword: this.searchInput, // 关键字
      itemlists: [], // 列表数据
      // 搜索框
      searchInput: '',
      // 当前页数
      currentPage: 1,
      total: 0
    };
  },
  created() {
    this.loadItemList();
  },
  methods: {
    // 获取列表数据
    async loadItemList() {
      try {
        const params = {
          page: this.currentPage, // 当前页数
          pagesize: this.pagesize, // 页尺寸
          keyword: this.keyword // 关键字
        };
        const { data } = await getItemLists(params);
        this.itemlists = data.data.items;
        // 总页数
        this.total = data.total;
      } catch (err) {
        this.$message.error('题组列表获取失败');
      }
    },
    // 删除按钮点击事件
    delitem() {
      this.$confirm('此操作将永久删除该试题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await delItemLists();
            this.$message.success('删除成功');
          } catch (err) {
            this.$message.error('删除失败,请重试');
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    // 页面显示的数据条数
    itemListSizeChange(val) {
      this.pagesize = val;
      this.loadItemList();
    },
    itemListCurrentChange(val) {
      this.currentPage = val;
      this.loadItemList();
    }
  }
};
</script>

<style lang="less" scoped>
.item-list-container {
  .item-list-card {
    position: relative;
    padding-bottom: 60px;
  }
  .list-input-search {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    div:nth-child(1) {
      width: 400px;
      .el-input {
        margin-left: 10px;
        width: 250px;
      }
    }
  }
  .el-table {
    margin-top: 20px;
  }
  .color-table-itemlist {
    color: #3d56e6;
  }
  .el-pagination {
    margin-top: 30px;
    position: absolute;
    right: 20px;
  }
}
</style>
